<template>
    <OAMain title="首页"> 
        <el-card> <!--elementplus的卡片标签-->
            <template #header> <!--卡片头部的插槽-->
                <h2>部门员工数量</h2>
            </template>
            <div id="department-staff-count" style="width: 100%;height:300px;"></div> <!--放置图表-->
        </el-card>

        <el-row :gutter="20"> <!--行组件 ，设置间距-->
            <el-col :span="12"> <!--列组件，每行包含两个，占一半行宽（12/24）-->
                <el-card>
                    <template #header>
                        <h2>最新通知</h2>
                    </template>
                    <el-table :data="informs"> <!--表格组件-->
                        <el-table-column label="标题"> <!--列组件-->
                            <template #default="scope"> <!--插槽自定义单元格内容，scope是包含当前行数据的对象-->
                                <router-link :to="{ name: 'inform_detail', params: { pk: scope.row.id } }">{{ scope.row.title
                                    }}</router-link>  <!--绑定一个路由链接进行跳转  params：传递给路由的参数（传递当前表格行中通知的id） -->
                            </template>
                        </el-table-column>
                        <el-table-column label="发布者" prop="author.realname"></el-table-column>
                        <el-table-column label="发布时间">
                            <template #default="scope">
                                {{ timeFormatter.stringFromDate(scope.row.create_time) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="是否已读">
                            <template #default="scope">
                                <el-tag v-if="scope.row.reads.length > 0">已读</el-tag>
                                <el-tag v-else type="danger">未读</el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <template #header>
                        <h2>最新请假</h2>
                    </template>
                    <el-table :data="absents">
                        <el-table-column label="部门" prop="requester.department.name"></el-table-column>
                        <el-table-column label="发起人" prop="requester.realname"></el-table-column>
                        <el-table-column label="起始日期" prop="start_date"></el-table-column>
                        <el-table-column label="结束日期" prop="end_date"></el-table-column>
                        <el-table-column label="发起时间">
                            <template #default="scope">
                                {{ timeFormatter.stringFromDateTime(scope.row.create_time) }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </OAMain>
</template>

<script setup name="home">
import { ref, reactive, onMounted } from "vue"
import { ElMessage } from "element-plus"
import timeFormatter from "@/utils/timeFormatter";
import OAMain from "@/components/OAMain.vue"
import homeHttp from "@/api/homeHttp";
import * as echarts from 'echarts';  //导入Echarts

let informs = ref([])
let absents = ref([])
onMounted(async () => {
    try {
        informs.value = await homeHttp.getLatestInforms()  //发送获得最新通知的请求
        absents.value = await homeHttp.getLatestAbsents()  //发送获得最新考勤的请求
        let rows = await homeHttp.getDepartmentStaffCount()  //发送请求获取部门员工数量
        //console.log(rows);
        //[{…}, {…}, {…}, {…}, {…}, {…}]
        // 0: {name: "董事会", staff_count: 3}
        // 1: {name: "产品开发部", staff_count: 1}
        // 2: {name: "运营部", staff_count: 1}............
        
        let xdatas = []  //定义数组存储数据
        let ydatas = []
        for(let row of rows){
            xdatas.push(row.name)
            ydatas.push(row.staff_count)
        }

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('department-staff-count'));
        // 绘制图表
        myChart.setOption({
            tooltip: {},
            xAxis: {
                data: xdatas  //定义x轴的数据项
            },
            yAxis: {},
            series: [
                {
                    name: '员工数量',
                    type: 'bar', //柱状图
                    data: ydatas
                }
            ]
        });
    } catch (detail) {
        ElMessage.error(detail)
    }
})
</script>

<style scoped></style>